<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8" import="java.util.*"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<!DOCTYPE html>
<HTML>
<HEAD>
	<TITLE>tree</TITLE>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" href="${path }/resource/zTree/css/demo.css" type="text/css">
	<link rel="stylesheet" href="${path }/resource/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
	<script type="text/javascript" src="${path }/resource/zTree/js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="${path }/resource/zTree/js/jquery.ztree.core.js"></script>
	<script type="text/javascript" src="${path }/resource/zTree/js/jquery.ztree.excheck.js"></script>
	<script type="text/javascript" src="${path }/resource/zTree/js/jquery.ztree.exedit.js"></script>
	<SCRIPT type="text/javascript">
	var zTree;
	//创建树型结构
	function createTree() {
		var setting = {
			check: {
				enable: true
			},
			view: {
				addHoverDom: addHoverDom,
				removeHoverDom: removeHoverDom,
				selectedMulti: false
			},
			edit: {
				drag: {
					autoExpandTrigger: true,
					prev: dropPrev,
					inner: dropInner,
					next: dropNext
				},
				enable: true,
				editNameSelectAll: true,
				showRemoveBtn: showRemoveBtn,
				showRenameBtn: showRenameBtn 
			},
			  async: {
		            enable: true,//设置是否异步加载
		            url:"${path}/datafile/tree/all"
		        },
			data: {
				simpleData: {
					enable: true,
					pIdKey: "pId",
	                idKey: "id"
				},
				key: {
                    checked: "CHECKED",
                    name:"name",
                    url:"url"
                }
			},
			callback: {
				//onAsyncSuccess:zTreeOnAsyncSuccess,//数据加载成功回掉
				beforeDrag: beforeDrag,
				beforeDrop: beforeDrop,
				beforeDragOpen: beforeDragOpen,
				onDrag: onDrag,
				onDrop: onDrop,
				onExpand: onExpand,
				//beforeEditName: beforeEditName,
				beforeRemove: beforeRemove,
				beforeRename: beforeRename,
				onRemove: onRemove,
				onRename: onRename,
				onClick: onClick,
				onCheck: onCheck
				/*beforeClick: beforeClick*/
			}
		};
		  zTree = $.fn.zTree.init($("#treeDemo"), setting);   
		  zTree.expandAll(true);
	}
	function onClick(e, treeId, treeNode) {
	//把选择的节点的数据展示在文本框
	$("#url").val(treeNode.url);
	if(node.url!=null&&node.url!=undefined){
		alert(node.url);
	}
	}
	/*把选中的id展示在文本框  */
	function onCheck(e, treeId, treeNode) {
		nodes = zTree.getCheckedNodes(true),
		v = "";
		for (var i=0, l=nodes.length; i<l; i++) {
			v += nodes[i].id + ",";
		}
		if (v.length > 0 ) v = v.substring(0, v.length-1);
		var ids = $("#ids");
		ids.attr("value", v);
	}
		function beforeRemove(treeId, treeNode) {
			className = (className === "dark" ? "":"dark");
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			zTree.selectNode(treeNode);
			return confirm("确认删除 节点 -- " + treeNode.name + " 吗？");
		}
		function onRemove(e, treeId, treeNode) {
			console.log("删除"+treeNode.id);
			//发ajax请求删除当前id数据
		}
		function beforeRename(treeId, treeNode, newName, isCancel) {
			className = (className === "dark" ? "":"dark");
			if (newName.length == 0) {
				setTimeout(function() {
					var zTree = $.fn.zTree.getZTreeObj("treeDemo");
					zTree.cancelEditName();
					//console.log("节点名称不能为空.");
				}, 0);
				return false;
			}
			return true;
		}
		/*修改成功回调函数  */
		function onRename(e, treeId, treeNode, isCancel) {
			//var data = {"id":id,"name":name,"pid":pid,"url":url}
			console.log(treeNode.id);
			console.log(treeNode.name);
			//发送ajx请求修改数据
		}
		/* 展示编辑和删除按钮 */
		function showRemoveBtn(treeId, treeNode) {
			//return !treeNode.isFirstNode;
			return true;
		}
		function showRenameBtn(treeId, treeNode) {
			//return !treeNode.isLastNode;
			return true;
		}
		/*光标进入时，新增按钮的隐藏和显示  */
		var newCount = 1;
		function addHoverDom(treeId, treeNode) {
			var sObj = $("#" + treeNode.tId + "_span");
			if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
			var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
				+ "' title='add node' onfocus='this.blur();'></span>";
			sObj.after(addStr);
			var btn = $("#addBtn_"+treeNode.tId);
			if (btn) btn.bind("click", function(){
				var zTree = $.fn.zTree.getZTreeObj("treeDemo");
				zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:"new node" + (newCount++)});
				return false;
			});
		};
		function removeHoverDom(treeId, treeNode) {
			$("#addBtn_"+treeNode.tId).unbind().remove();
		};
		/*拖动至同胞元素前面  */
		function dropPrev(treeId, nodes, targetNode) {
			var pNode = targetNode.getParentNode();
			if (pNode && pNode.dropInner === false) {
				return false;
			} else {
				for (var i=0,l=curDragNodes.length; i<l; i++) {
					var curPNode = curDragNodes[i].getParentNode();
					if (curPNode && curPNode !== targetNode.getParentNode() && curPNode.childOuter === false) {
						return false;
					}
				}
			}
			return true;
		}
		/*拖动至元素里面 */
		function dropInner(treeId, nodes, targetNode) {
			if (targetNode && targetNode.dropInner === false) {
				return false;
			} else {
				for (var i=0,l=curDragNodes.length; i<l; i++) {
					if (!targetNode && curDragNodes[i].dropRoot === false) {
						return false;
					} else if (curDragNodes[i].parentTId && curDragNodes[i].getParentNode() !== targetNode && curDragNodes[i].getParentNode().childOuter === false) {
						return false;
					}
				}
			}
			return true;
		}
		/*拖动至同胞元素后面  */
		function dropNext(treeId, nodes, targetNode) {
			console.log("dropNext");
			var pNode = targetNode.getParentNode();
			if (pNode && pNode.dropInner === false) {
				return false;
			} else {
				for (var i=0,l=curDragNodes.length; i<l; i++) {
					var curPNode = curDragNodes[i].getParentNode();
					if (curPNode && curPNode !== targetNode.getParentNode() && curPNode.childOuter === false) {
						return false;
					}
				}
			}
			return true;
		}
		var className = "dark", curDragNodes, autoExpandNode;
		/*拖动前回调函数  */
		function beforeDrag(treeId, treeNodes) {
			className = (className === "dark" ? "":"dark");
			for (var i=0,l=treeNodes.length; i<l; i++) {
				if (treeNodes[i].drag === false) {
					curDragNodes = null;
					return false;
				} else if (treeNodes[i].parentTId && treeNodes[i].getParentNode().childDrag === false) {
					curDragNodes = null;
					return false;
				}
			}
			curDragNodes = treeNodes;
			return true;
		}
		/*拖动时展开目标  */
		function beforeDragOpen(treeId, treeNode) {
			autoExpandNode = treeNode;
			return true;
		}
		/*拖动结束前回调  */
		function beforeDrop(treeId, treeNodes, targetNode, moveType, isCopy) {
			className = (className === "dark" ? "":"dark");
			return true;
		}
		/*拖动开始回调  */
		function onDrag(event, treeId, treeNodes) {
			console.log("onDrag");
			className = (className === "dark" ? "":"dark");
		}
		//停止拖动回调，获取id和pid进行数据的更新
		function onDrop(event, treeId, treeNodes, targetNode, moveType, isCopy) {
			console.log(treeNodes[0]);
			console.log("ID"+treeNodes[0].id);
			console.log("父id" +treeNodes[0].pId);
			//发送ajax请求更改数据,改变父id
			className = (className === "dark" ? "":"dark");
		}
		/* 展开回调 */
		function onExpand(event, treeId, treeNode) {
			if (treeNode === autoExpandNode) {
				className = (className === "dark" ? "":"dark");
			}
		}
		$(document).ready(function(){
			createTree();
		});
	</SCRIPT>
</HEAD>

<BODY>
<div class="content_wrap">
	<div class="zTreeDemoBackground left">
		<ul id="treeDemo" class="ztree"></ul>
		<!-- <ul id="log" class="log"></ul> -->
	</div>
		<!--存id的隐藏标签  -->
		<input type="hidden" value="" id="node">
		<input type="hidden" value="" id="id">
		<input type="text" value="" id="ids">
		<!-- <input  type="text"  value="" id="pid"/> -->
		<input  type="text"  value="" id="url"/>
		<input type="button" value="修改" onclick="update()">
	</div>
	<script type="text/javascript">
	function update(){
		var id = $("#id").val();
		var url = $("#url").val();
		
		//var data = {"id":id,"name":name,"pid":pid,"url":url}
		//console.log(data);
		//发送ajax请求更新数据 更改url
		//createTree();//重新加载
	}
	
	</script>
</BODY>
</HTML>